import React, { PureComponent } from "react";
import { LeftPage, LeftTopBox, LeftBottomBox, LeftCenterBox } from "./style";
import { ModuleTitle } from "../../style/globalStyledSet";
import { BorderBox12, BorderBox13 } from "@jiaminghi/data-view-react";
import TrafficSituation from "./charts/TrafficSituation";
import UserSituation from "./charts/UserSituation";
import WinningBid from "./charts/WinningBid";
import { connect } from "dva";

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      type: 'month'
    };
  }
  render() {
    const { userSitua, trafficSitua, accessFrequency, peakFlow } = this.props;
    return (
      <LeftPage>
        <LeftCenterBox>
          <ModuleTitle>济南公共资源交易中心-招标计划</ModuleTitle>
          <WinningBid userSitua={userSitua} />
        </LeftCenterBox>
        {/* 顶部图表 */}
        <LeftTopBox>
          <BorderBox12 className="left-top-borderBox12">
            <div className="left-top">
              <ModuleTitle>
                <i className="iconfont">&#xe78f;</i>
                <span>济南一建2023年同期对比数据</span>
                <span className="change" onClick={() => this.setState({type:"month" }) }>月度</span>
                <span className="change" onClick={() => this.setState({type:"quarter" })}>季度</span>
              </ModuleTitle>
              {/* 图表 */}
              <TrafficSituation trafficSitua={{type: this.state.type}}></TrafficSituation>
            </div>
          </BorderBox12>
        </LeftTopBox>

        {/* 底部图表 */}
        <LeftBottomBox>
          <BorderBox13 className="left-bottom-borderBox13">
            <div className="left-bottom">
              <ModuleTitle>
                <i className="iconfont">&#xe88e;</i>
                <span>济南一建2023年中标项目</span>
              </ModuleTitle>
              {/* 图表 */}
              <UserSituation userSitua={userSitua}></UserSituation>
            </div>
          </BorderBox13>
        </LeftBottomBox>
      </LeftPage>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    accessFrequency: state.leftPage.accessFrequency,
    peakFlow: state.leftPage.peakFlow,
    userSitua: state.leftPage.userSitua,
    trafficSitua: state.leftPage.trafficSitua,
  };
};

const mapStateToDispatch = (dispatch) => ({});

export default connect(mapStateToProps, mapStateToDispatch)(index);
